<template>
  <div class="SearchList" :class="{pd:!condition}">
    <div class="searchInt">
      <a-input-search :placeholder="`${$t('common.search')}${searchTitle}`" v-model="keyword" style="width:320px" @search="searchPosition">
      </a-input-search>
      <!-- <a-button type="primary" ghost @click="searchPosition">{{$t('common.search')}}{{searchTitle}}</a-button> -->
      <span @click="conditionFn" class="cur" v-if="searchList && searchList.length > 1">{{$t('searchList.conditionSearch')}} <a-icon v-if="!condition" type="down" /><a-icon v-if="condition" type="up" /></span>
      <!-- <a-button class="refresh" type="dashed" @click="searchPosition" v-if="refresh">刷新</a-button> -->
    </div>
    <div class="content" v-show="condition" v-if="!!searchList">
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row :gutter="24" ><!-- 二维数组 -->
          <a-col :span="8" v-for='items in searchList' :key="items.id">
            <a-form-item v-bind="formItemLayout" v-if="!items.role || items.role.includes($store.state.user.userInfo.role)">
              <span slot="label">
                <a-tooltip :title="items.name" placement="topLeft">
                  <span v-if="items.name">{{ items.name }}</span>
                </a-tooltip>
              </span>
              <!-- enterpriseName -->
              <a-auto-complete v-if="items.type === 'autoComplete'" v-decorator="[items.id,{ rules: [{ required: false }] }]" :dataSource="dataSource" style="width: 100%" @search="onSearch" :placeholder="$t('common.pleaseEnter') + items.name"/>
              <a-input :disabled="items.role && items.role.length > 0 && !twoArrCludes(items.role)" v-if="items.type === 'input'" v-decorator="[items.id,{ rules: [{ required: false }] }]" :placeholder="$t('common.pleaseEnter') + items.name" />
              <a-select :mode="items.mode" :show-search="items.showSearch" :filter-option="filterOption" v-if="items.type === 'select'" :placeholder="$t('common.choose') + items.name" v-decorator="[items.id,{ rules: [{ required: false }] }]" allowClear>
                <a-select-option v-for="element in items.values" :key="element.id" :value="element.id">{{ element.name }}</a-select-option>
              </a-select>
              <a-checkbox v-if="items.type === 'checkbox'"  v-decorator="[items.id,{ valuePropName: 'checked', initialValue: false }]"></a-checkbox>
              <a-date-picker v-if="items.type === 'date'" style="width:100%" :placeholder="$t('common.choose') + items.name" v-decorator="[items.id,{ rules: [{ required: false }] }]"></a-date-picker>
              <a-range-picker v-if="items.type === 'dateRange'" style="width:100%" v-decorator="[items.id,{ rules: [{ required: false }] }]"></a-range-picker>
              <a-tree-select v-if="items.type === 'treeSelect'"
                style="width: 100%" v-model="value" allowClear treeDefaultExpandAll v-decorator="[items.id,{ rules: [{ required: false }] }]"
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="$t('common.choose') + items.name" :treeData="items.treeData"
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script>
import { twoArrCludes } from '@/util/roles'
import { getCompanyNameList } from '@/api/position'
export default {
  name: 'SearchList',
  props: ['searchList', 'searchTitle', 'refresh', 'valueFileds'],
  data () {
    return {
      form: this.$form.createForm(this, { name: 'SearchList' }),
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      opretaShow: false,
      dateShow: false,
      condition: false,
      keyword: '',
      treeExpandedKeys: [],
      value: undefined,
      dataSource: []
    }
  },
  created () {
  },
  watch: {
    valueFileds: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.form.setFieldsValue(newValue)
            this.searchPosition()
          })
        }
      },
      deep: true,
      immediate: false
    }
  },
  mounted () {
    if (this.valueFileds && JSON.stringify(this.valueFileds) !== '{}') {
      this.form.setFieldsValue(this.valueFileds)
      this.searchPosition()
    }
  },
  methods: {
    twoArrCludes,
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    hide () {
      this.visible = false
    },
    conditionFn () {
      this.condition = !this.condition
      // if (!this.condition) {
      //   this.$emit('searchFormValue', {})
      // }
    },
    clear () {
      let obj = {}
      this.searchList.forEach(value => {
        obj[value.id] = undefined
      })
      this.form.setFieldsValue(obj)
      this.searchPosition()
    },
    searchPosition (e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.keyword = this.keyword
          // if (e) {
          //   values.clearDate = true
          // }
          this.$emit('searchFormValue', values)
          this.condition = false
        }
      })
    },
    onSearch (searchText) {
      if (searchText) {
        getCompanyNameList(searchText).then(res => {
          if (res.code === 200) {
            this.dataSource = res.data
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.SearchList
  background #f0f2f5
  position relative
  // border-bottom 1px solid eeeGrey
  .refresh
    margin-left 6px
  :global(.ant-input-search-icon)
    color var(--blue-500)
  :global(.ant-input-suffix)
    padding-left 6px
    border-left 1px solid borderColor
  &.pd
    padding 0
    .content
      overflow hidden
    .searchInt
      padding-bottom 7px
      background #fff
      border-top 1px solid #fff
      border-left 1px solid #fff
      border-radius 0
  .content
    padding-top 12px
    border-top 1px solid eeeGrey
    .ant-advanced-search-form
      padding 6px 24px 0
      :global(.ant-form-item)
        width 100%
        :global(.ant-form-item-label)
          width 25%
          white-space: nowrap
          text-overflow: ellipsis
          overflow: hidden
          word-break: break-all
        :global(.ant-form-item-control-wrapper)
          width 75%
  .searchInt
    position absolute
    background #f0f2f5
    top -51px
    right 0
    padding 9px 24px 10px 18px
    // border 1px solid eeeGrey
    border-top 1px solid eeeGrey
    border-left 1px solid eeeGrey
    border-top-left-radius borderRadius
  .cur
    cursor pointer
    margin-left 6px
</style>
